<template>
    <el-container>
        <el-header height="80px" style="padding: 10px;">
            <!-- 工具/搜索栏 -->
            <div style="padding: 5px; background: #F2F6FC; border-radius: 5px;">
                <div class="topbar">
                    <div class="left-panel">
                        <div class="right-panel-search">
                            <el-input v-model="searchForm.searchText" placeholder="应用名..." style="width: 260px;"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="getRouteMetrics()">搜索</el-button>
                        </div>
                    </div>
                </div>
            </div>       
        </el-header>

        <el-main style="padding-left: 10px; padding-right: 10px;">
            <el-row :gutter="20" v-if="chartOptions.length>0">
                <el-col :span="8" v-for="(item, i) in chartOptions" :key="i">
                    <div :id="`chart_route_${i}`" style="width: 100%; height: 250px;"></div>
                </el-col>
            </el-row>
            <el-row v-else>
                <el-empty :image-size="115">
                    <template slot="description">
                        <span style="color: #F56C6C; font-size: 14px;">暂无监控数据，系统将会实时刷新，请稍候......</span>
                    </template>
                    <el-button type="primary" plain @click="getMetrics()">尝试手动刷新</el-button>
                </el-empty>
            </el-row>
        </el-main>                
    </el-container>
</template>

<script>
import echarts from '@/echarts/echarts'

export default {
    data() {
        return {
            searchForm: {
                searchText: ''
            },
            chartOptions: [],
            timer: null
        }
    },
    mounted() {       
        // 初始化加载数据
        this.getRouteMetrics()
        this.setTimer()
    },
    beforeDestroy() {
        // 清除定时
        this.clearTimer()
    },
    methods: {
        async getRouteMetrics() {
            let response = await this.$API.routeFlowMetric.getRouteMetrics(this.searchForm)
            this.chartOptions = response.data
            this.loadChart()
        },

        loadChart() {
            if (this.chartOptions.length > 0) {
                this.$nextTick(() => {
                    this.chartOptions.forEach((item, i) => {
                        let chart = echarts.init(document.getElementById(`chart_route_${i}`))
                        chart.setOption(item)
                    })
                })
            }
        },

        setTimer() {
            this.clearTimer()
            let that = this
            this.timer = setInterval(() => {
                that.getRouteMetrics()                
            }, 10000)
        },

        clearTimer() {
            clearInterval(this.timer)
            this.timer = null
        }
       
    }
}
</script>

<style lang="scss" scoped>
.el-main {
    width: 100%;
    height: 100%;
    padding: 0px;
}
.topbar {
    height: 50px; 
    display: flex;
    justify-content: space-between;
    margin-bottom: 0px;

    .left-panel {
        display: flex;
        align-items: center;
    }
    .right-panel {
        display: flex;
        align-items: center;
    }

    .right-panel-search {display: flex;align-items: center;}

    .right-panel-search > * + * {margin-left: 10px;}
}


</style>